<!DOCTYPE html>
<html lang="en">
<head>
	<title>Select styles with CSS only</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="../src/select-css.css">
	<link rel="stylesheet" href="demo.css">
</head>
<body>

<h1>CSS-only custom-styled selects</h1>

<h4><a href="http://www.filamentgroup.com">Filament Group Inc.</a></h4>

<p>This is a demo page for <a href="https://github.com/filamentgroup/select-css">the select-css plugin</a>.</p>

<label>Native select</label>
<select>
	<option>Apples</option>
	<option>Bananas</option>
	<option>Grapes</option>
	<option>Oranges</option>
	<option selected>A very long option name to test wrapping</option>
</select>


<label>Same select w/ CSS applied</label>
<select class="select-css">
	<option>Apples</option>
	<option>Bananas</option>
	<option>Grapes</option>
	<option>Oranges</option>
	<option selected>A very long option name to test wrapping</option>
</select>


<div style="width:50%; min-width:10em;">
<label>Same, in a 50% wide container</label>
<select class="select-css">
	<option>Apples</option>
	<option>Bananas</option>
	<option>Grapes</option>
	<option>Oranges</option>
	<option selected>A very long option name to test wrapping</option>
</select>
</div>

<label style="display: inline-block;">Same, styled inline block: </label>
<select class="select-css" style="display: inline-block; width: auto;">
	<option>Apples</option>
	<option>Bananas</option>
	<option>Grapes</option>
	<option>Oranges</option>
	<option selected>A very long option name to test wrapping</option>
</select>

<label>Text input:
	<input type="text" placeholder="I'm a placeholder">
</label>


<div class="dark-wrapper">
	<label>Same select inside a dark wrapper</label>
	<select class="select-css">
		<option>Apples</option>
		<option>Bananas</option>
		<option>Grapes</option>
		<option>Oranges</option>
		<option selected>A very long option name to test wrapping</option>
	</select>
</div>

<p style="font-size: 0.8rem;">
	Note: in Firefox, using gradients on the <code>&lt;select&gt;</code> background
	without a solid fallback color can make the option list unreadable.
	<a href="https://github.com/filamentgroup/select-css/pull/14">See pull request #14</a>
	for details.
</p>


</body>
</html>
